import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 1.可以在内部声明一个moduleA
const moduleA = new Vuex.Store({
    state: { 
        products: [
            {name: '鼠标', price: 20},
            {name: '键盘', price: 40},
            {name: '耳机', price: 60},
            {name: '显示屏', price: 80}
          ]
    },
    getters: {
        // saleProducts: function (state) {
        //     // 没有传入的参数，功能：将所有商品的价格除以二的结果返回
        //     // 调用方式：this.$mymodule.state.a.getters.saleProducts
        //     let saleProducts = state.products.map( product => {
        //       return {
        //         name: product.name,
        //         price: product.price / 2
        //       }
        //     });
        //     return saleProducts;
        // }
    },
    mutations: { 
        // 注意:调用mutaions中回调函数, 只能使用store.commit(type, payload)
        // 触发该方法使每个商品的价格减,在ProductListOne.vue写个按钮，触动当前页面的method调用该方法
        // 调用方式：this.$mymodule.state.a.commit('minusPrice', 2);    // commit的第一个参数为方法名
        minusPrice (state, payload ) {
            let newPrice = state.products.forEach( product => {
              product.price -= payload
            })
            console.log('方法被触发啦！现在商品价格如：' + newPrice)
        }
    },
    actions: { 
        // 若把mutation中的方法改为异步执行，延迟3秒后执行，则代码如下
        minusPriceAsync( context, payload ) {
            setTimeout( () => {
              context.commit( 'minusPrice', payload ); //context提交
            }, 2000)
        }
    }
});
  
// 2.可以引用外部的vuex
import moduleB from './xmodule/moduleB'  

const xmodule = new Vuex.Store({
    state: {
        // 这里是根vuex状态
    },
    mutations: {
        // 这里是根vuex状态
    },
    actions: {
        // 这里是根vuex状态
    },
    modules: {
      namespaced: true, // 为了解决不同模块命名冲突的问题
      a: moduleA,
      b: moduleB
    }
});

export default xmodule;
//   store.state.a // -> moduleA 的状态
//   store.state.b // -> moduleB 的状态